<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单词背诵系统</title>
</head>
<script src="./js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入index页css文件 -->
<link rel="stylesheet" href="./css/index.css">
<body>
<div id="app" style="display: flex;justify-content: space-around">
    <div class="box useRanking" style="width: 25%;height: 90vh;overflow-y: scroll">
        <h3 style="text-align: center;margin: 10px">用户学习排名列表</h3>
        <ul style="margin: 10px auto;width: 90%">
            <li style="display: flex;margin-bottom: 10px;justify-content: center;font-weight: 700">
                <div style="width: 15%">排名</div>
                <div style="width: 30%">用户名</div>
                <div style="width: 20%">已学</div>
                <div style="width: 20%">成就</div>
            </li>
            <li class="rank" style="display: flex;justify-content: center;margin-bottom: 5px"
                v-for="(item,index) in useRanking" :key="index">
                <div style="width: 15%">{{index + 1}}</div>
                <div style="width: 30%">{{item.username}}</div>
                <div style="width: 20%">{{item.num}}</div>
                <div style="width: 20%">{{item.achievement}}</div>
            </li>
        </ul>
    </div>
    <div>
        <nav>
            <div class="nav">单词背诵系统</div>
        </nav>
        <!--中间控件-->
        <div class="menu">
            <div class="user">
                <div><img src="./images/user.png"/>：{{User.username}}</div>
                <hr>
                <div><img src="./images/achievement.png"/>：{{User.achievement}}</div>
                <hr>
                <div><img src="./images/study.png"/>：已学{{learnedWordsLength}}个单词</div>
            </div>

            <div class="progress_bar">
                <el-progress type="circle" color="gray" :percentage="Scale"></el-progress>
                当前已学习
            </div>
            <div class="mode">
                <div class="container">
                    <form>
                        <label>
                            <input type="radio" name="radio" :checked="easyMode == true ? 'checked' : ''"
                                   @click="openEasyMode">
                            <span>普通模式</span>
                        </label>
                        <label>
                            <input type="radio" name="radio" :checked="commonMode == true ? 'checked' : ''"
                                   @click="OpenCommonMode">
                            <span>一般模式</span>
                        </label>
                        <label>
                            <input type="radio" name="radio" :checked="difficultMode == true ? 'checked' : ''"
                                   @click="openDifficultMode">
                            <span>困难模式</span>
                        </label>
                    </form>
                </div>
            </div>
        </div>


        <div class="showWord">
            <div v-if="easyMode==true" style="font-size: 18px;text-align: center;">当前单词：{{Word.value}}</div>
            <div v-if="commonMode==true" style="font-size: 18px;text-align: center;">当前单词：{{showWord}}</div>
            <div v-if="difficultMode==true" style="font-size: 18px;text-align: center">根据中文打出对应单词</div>
            <hr style="margin-top: 10px">
            <div style="padding-top: 3px;font-size: 18px;text-align: center">
                {{Word.explain}}
                <div v-if="Word.collection == null"
                     style="width:16px;height: 16px;margin-top: 5px ;float: right;margin-right: 10px;background-image: url('./images/未收藏.png');"
                     @click="switchCollection(User.id,Word.id)"></div>
                <div v-else
                     style="width:16px;height: 16px;margin-top: 5px ;float: right;margin-right: 10px;background-image: url('./images/已收藏.png');"
                     @click="switchCollection(User.id,Word.id)"></div>
            </div>
        </div>

        <div class="form-control">
            <input type="value" required="" id="myInput" v-model="sendWord.value" @keydown.enter="submitWord">
            <label>
                <span style="transition-delay:0ms">请</span><span style="transition-delay:50ms">输</span><span
                    style="transition-delay:100ms">入</span><span style="transition-delay:150ms">当</span><span
                    style="transition-delay:200ms">前</span><span style="transition-delay:250ms">单</span><span
                    style="transition-delay:300ms">词</span><span style="transition-delay:350ms">，</span><span
                    style="transition-delay:400ms">回</span><span style="transition-delay:450ms">车</span><span
                    style="transition-delay:500ms">提</span><span style="transition-delay:550ms">交</span><span
                    style="transition-delay:600ms">😀</span>
            </label>
        </div>
        <div style="display: flex;justify-content: center">
            <img v-if="TablePet == 1" src="images/桌宠1.gif"
                 style="width: 450px;margin: 0 auto;border-radius: 20px;overflow: hidden">
            <div class="box" v-if="TablePet == 2"
                 style="box-sizing: border-box;color: #FFFFFF;height: 320px;width: 600px;padding: 15px;margin: 20px auto;border-radius: 20px;overflow: hidden">
                <div style="display: flex;justify-content: space-around;color: black;font-weight: 700">
                    <div style="width: 20%">最近单词</div>
                    <div style="width: 40%">翻译</div>
                    <div style="width: 10%">次数</div>
                    <div style="width: 30%">时间</div>
                </div>
                <div v-for="item in learned_words"
                     style="display: flex;justify-content: space-around;margin-top: 5px;border-top: 1px solid gray">
                    <div style="width: 20%">{{item.wordValue}}</div>
                    <div style="width: 40%">{{item.wordExplain}}</div>
                    <div style="width: 10%">{{item.learnedCount}}</div>
                    <div style="width: 30%;color: black">{{item.lastSubmissionTime}}</div>
                </div>
            </div>

            <div class="box collectionWords" v-if="TablePet == 3"
                 style="box-sizing: border-box;color: #FFFFFF;height: 320px;width: 450px;padding: 15px;margin: 20px auto;border-radius: 20px;overflow: scroll">
                <div style="display: flex;justify-content: space-around;color: black;font-weight: 700">
                    <div style="width: 30%">收藏夹单词</div>
                    <div style="width: 70%">翻译</div>
                    <div style="width: 10%">操作</div>
                </div>
                <div v-for="item in collection_words"
                     style="display: flex;justify-content: space-around;margin-top: 5px;border-top: 1px solid gray">
                    <div style="width: 30%">{{item.value}}</div>
                    <div style="width: 60%">{{item.explain}}</div>
                    <div style="width: 10%">
                        <div style="width:16px;height: 16px;margin-top: 5px ;float: right;margin-right: 10px;background-image: url('./images/已收藏.png');"
                             @click="switchCollection(User.id,item.id)"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 系统使用说明 -->
    <div class="box" style="width: 25%;height: 90vh">
        <h3 style="text-align: center;margin: 10px">系统使用说明</h3>
        <div style="margin: 10px auto;padding: 10px 20px" class="tips">
            <div>数字键 1 切换普通模式</div>
            <div>数字键 2 切换一般模式</div>
            <div>数字键 3 切换困难模式</div>
            <div>数字键 4 背景音乐开关</div>
            <div>数字键 5 召唤学习氛围组</div>
            <div>数字键 6 最近已学习单词</div>
            <div>数字键 7 单词收藏夹</div>
            <div>数字键 8 管理词源</div>
            <div>空格键切换输入框光标状态</div>
            <div>Ctrl 键播放当前单词英式发音</div>
            <div>回车键提交当前单词</div>
            <div>F5键刷新系统当前排名</div>
        </div>
    </div>

    <!--消息提示-->

    <!-- 词源管理弹窗 -->
    <el-drawer
            title="词源管理"
            :visible.sync="sourceManageVisiable"
            direction="ltr">
        <el-divider></el-divider>

        <div style="padding: 20px">
            <el-button type="primary" @click="createSourceVisible = true">创建词源</el-button>
            <el-button type="info" @click="addWordVisible = true">新增词汇</el-button>

            <el-divider></el-divider>
            <el-select v-if="User.username == 'admin'" v-model="SourceManageInfo.now_source" @change="switchSource" :placeholder="SourceManageInfo.now_source_name">
                <el-option
                        v-for="item in SourceManageInfo.sourceList"
                        :key="item.source_id"
                        :label="item.name + ' - '+ item.create_user_name"
                        :value="item.source_id">
                </el-option>
            </el-select>
            <el-select v-else v-model="SourceManageInfo.now_source" @change="switchSource" :placeholder="SourceManageInfo.now_source_name">
                <el-option
                        v-for="item in SourceManageInfo.sourceList"
                        :key="item.source_id"
                        :label="item.name"
                        :value="item.source_id">
                </el-option>
            </el-select>
            <span>当前词源单词总数：{{SourceManageInfo.now_source_wordList_length}}</span>
            <el-divider></el-divider>
            <el-table
                    border
                    :data="SourceManageInfo.now_source_wordList.filter(data => !search || data.value.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%">
                <el-table-column
                        label="单词"
                        prop="value">
                </el-table-column>
                <el-table-column
                        label="翻译"
                        prop="explain">
                </el-table-column>
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="ToUpdateWordSubmit(scope.row)">修改</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteWord(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            <div class="box collectionWords"-->
<!--                 style="box-sizing: border-box;color: black;max-height: 500px;padding: 15px;margin: 20px auto;overflow: scroll">-->
<!--                <div style="display: flex;background-color:#a4a7ad;border-bottom:1px solid black;width: 25%;justify-content: space-around;color: black;font-weight: 700;position: fixed">-->
<!--                    <div style="width: 30%">单词</div>-->
<!--                    <div style="width: 50%">翻译</div>-->
<!--                    <div style="width: 20%"><el-button type="info" @click="addWordVisible = true">新增词汇</el-button></div>-->
<!--                </div>-->
<!--                <div style="margin-top: 50px"></div>-->
<!--                <div v-for="item in SourceManageInfo.now_source_wordList"-->
<!--                     style="display: flex;justify-content: space-around;margin-top: 5px;border-top: 1px solid gray">-->
<!--                    <div style="width: 30%">{{item.value}}</div>-->
<!--                    <div style="width: 50%">{{item.explain}}</div>-->
<!--                    <div style="width: 10%">-->
<!--                        <el-button slot="reference" size="mini" @click="ToUpdateWordSubmit(item)">修改</el-button>-->
<!--                    </div>-->
<!--                    <div style="width: 10%">-->
<!--                        <el-button slot="reference" type="danger" @click="deleteWord(item.id)" size="mini">删除</el-button>-->
<!--                    </div>-->

<!--                </div>-->
<!--            </div>-->

        </div>
    </el-drawer>

    <!-- 新增词源弹窗 -->
    <el-dialog title="新增词源" :visible.sync="createSourceVisible">
        <el-form :model="createSource">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="createSource.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="createSourceVisible = false">取 消</el-button>
            <el-button type="primary" @click="createSourceSubmit">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 新增词汇弹窗 -->
    <el-dialog title="新增词汇" :visible.sync="addWordVisible">
        <el-form :model="addWord">
            <el-form-item label="单词" :label-width="formLabelWidth">
                <el-input v-model="addWord.value" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="翻译" :label-width="formLabelWidth">
                <el-input v-model="addWord.explain" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addWordVisible = false">取 消</el-button>
            <el-button type="primary" @click="addWordSubmit">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 修改词汇弹窗 -->
    <el-dialog title="修改词汇" :visible.sync="updateWordVisible">
        <el-form :model="updateWord">
            <el-form-item label="单词" :label-width="formLabelWidth">
                <el-input v-model="updateWord.value" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="翻译" :label-width="formLabelWidth">
                <el-input v-model="updateWord.explain" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateWordVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateWordSubmit">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script src="./js/jquery-3.6.3.min.js"></script>
<script>
    //创建Vue对象实例
    var app = new Vue({
        el: '#app',
        data: {
            search: '',
            sourceManageVisiable: false,
            targetSource: '',
            formLabelWidth: '120px',
            SourceManageInfo: [{
                now_source: '',
                now_source_name: '',
                sourceList: [{
                    source_id: '',
                    name: '',
                    scope: '',
                    create_user_name: '',
                }],
                now_source_wordList: [],
                now_source_wordList_length: ''
            }],
            createSourceVisible: false,
            createSource: {
                source_id: '',
                name: '',
                scope: ''
            },
            User: {
                id: '',
                username: '',
                achievement: '',
                source: '',
            },
            Word: {
                id: '',
                value: '',
                explain: '',
                collection: ''
            },
            sendWord: {
                id: '',
                value: '',
                explain: '',
                source: '',
            },
            addWordVisible: false,
            addWord: {
                value: '',
                explain: '',
                source: '',
            },
            updateWordVisible: false,
            updateWord: {
                id: '',
                value: '',
                explain: '',
                source: '',
            },
            learned_words: [{}],
            collection_words: [{}],
            easyMode: true,
            commonMode: false,
            difficultMode: false,
            wordsLength: '',
            learnedWordsLength: '',
            Scale: 0,
            inputFocus: false,
            showWord: '',
            prompts: [{
                value: '',
                type: '',
                weight: '',
            }],
            useRanking: [{
                username: '',
                num: '',
                achievement: '',
            }],
            myMp3: '',
            musicFlag: false,
            TablePet: 0,
        },
        mounted: function () {
            // 全局键盘监听事件
            const that = this;
            document.addEventListener('keydown', that.handleKeyDown)
            this.onload()
        },
        methods: {
            onload() {
                this.myMp3 = new Audio("./mp3/只因.mp3")
                this.User.username = localStorage.getItem("username");
                if (this.User.username == '') {
                    this.User.username = '亲爱的陌生人'
                }
                this.User.achievement = localStorage.getItem("userAchievement");
                this.User.id = localStorage.getItem("userid");
                this.getWord()
                this.getUserInfo()
                this.getSourceManageInfo()
                this.getPrompts()
                this.getUseRanking()
            },
            // 获取用户排名
            getUseRanking() {
                const that = this
                $.ajax({
                    url: '/users/user_ranking',
                    type: 'GET',
                    success: function (res) {
                        that.useRanking = res.data
                    }
                })
            },
            // 切换单词收藏状态
            switchCollection(uid, wid) {
                let that = this
                $.ajax({
                    url: '/words/collection',
                    type: 'POST',
                    data: {
                        uid: uid,
                        wid: wid
                    },
                    success: function (res) {
                        console.log(res.msg)
                        that.getWord()
                        that.getCollectionWords()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                })
            },
            // 快捷键解析引擎
            handleKeyDown(e) {
                var key = window.event ? e.keyCode : encodeURI.which;
                console.log(key)
                if (key == 49) {  // 普通模式
                    this.openEasyMode()
                } else if (key == 50) { // 一般模式
                    this.OpenCommonMode()
                } else if (key == 51) { // 困难模式
                    this.openDifficultMode()
                } else if (key == 52) {  // 数字键4 控制背景音乐开关
                    this.musicFlag = !this.musicFlag
                    if (this.musicFlag) {
                        this.myMp3.play()
                    } else {
                        this.myMp3.pause()
                    }
                } else if (key == 53) {
                    if (this.TablePet != 1) { //数字键5开启当前桌宠
                        this.TablePet = 1
                    } else { // 如果当前已经处于开启状态则关闭当前桌宠
                        this.TablePet = 0
                    }
                } else if (key == 54) {  // 数字键6
                    if (this.TablePet != 2) { //查看最近已学习单词
                        const that = this
                        $.ajax({
                            url: '/words/learned_words/' + that.User.id,
                            type: 'GET',
                            success: function (res) {
                                that.learned_words = res.data
                            }
                        })
                        this.TablePet = 2
                    } else { // 如果当前已经处于开启状态则关闭当前桌宠
                        this.TablePet = 0
                    }
                } else if (key == 55) { // 数字键7 单词收藏夹
                    if (this.TablePet != 3) {
                        this.getCollectionWords()
                        this.TablePet = 3
                    } else {
                        this.TablePet = 0
                    }
                } else if (key == 56) { // 数字键8 词源管理
                    this.sourceManageVisiable = !this.sourceManageVisiable
                } else if (key == 17) {
                    // ctrl 键播放单词读音
                    new Audio("https://api.vvhan.com/api/song?txt=" + this.Word.value).play();
                } else if (key == 32) {
                    this.inputFocus = !this.inputFocus
                    // 创建一个退格键事件
                    const backspaceEvent = new KeyboardEvent('keydown', {
                        key: 'Backspace',
                        code: 'Backspace',
                        keyCode: 8,
                        which: 8
                    });
                    const inputBox = document.getElementById('myInput');
                    inputBox.dispatchEvent(backspaceEvent);
                    // 空格获取输入行光标
                    if (this.inputFocus) {
                        inputBox.focus();
                    } else {
                        console.log('blur')
                        inputBox.blur();
                    }
                    inputBox.dispatchEvent(backspaceEvent);
                }
            },
            // 获取收藏夹单词
            getCollectionWords() {
                const that = this
                $.ajax({
                    url: '/words/collection/' + that.User.id,
                    type: 'GET',
                    success: function (res) {
                        that.collection_words = res.data.reverse()
                        if (res.flag == false) {
                            alert(res.msg)
                        }
                    }
                })
            },
            // 获取词源管理信息
            getSourceManageInfo() {
                const that = this
                $.ajax({
                    url: '/words/sourceManage/' + that.User.id,
                    type: 'GET',
                    success: function (res) {
                        if (res.flag && res.msg == '获取词源管理信息成功') {
                            that.SourceManageInfo = res.data
                        }
                    },
                    error: function (res) {
                        alert('获取词源管理信息失败')
                    }
                })
            },
            // 新增词源提交
            createSourceSubmit() {
                this.createSource.scope = this.User.id
                let that = this;
                $.ajax({
                    url: 'users/source',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(that.createSource),
                    dataType: 'json',
                    success: function (res) {
                        that.getSourceManageInfo()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                })
                this.createSourceVisible = false
            },
            // 新增词汇
            addWordSubmit() {
                this.addWord.source = this.SourceManageInfo.now_source
                let that = this;
                $.ajax({
                    url: 'words',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(that.addWord),
                    dataType: 'json',
                    success: function (res) {
                        that.getSourceManageInfo()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                })
                this.addWordVisible = false
            },
            ToUpdateWordSubmit(item) {
                this.updateWordVisible = true
                this.updateWord.id = item.id
                this.updateWord.value = item.value
                this.updateWord.explain = item.explain
                this.updateWord.source = this.SourceManageInfo.now_source
            },
            // 修改词汇
            updateWordSubmit() {
                let that = this;
                $.ajax({
                    url: 'words',
                    type: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify(that.updateWord),
                    dataType: 'json',
                    success: function (res) {
                        that.getSourceManageInfo()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                })
                this.updateWordVisible = false
            },
            // 删除词汇
            deleteWord(id) {
                let that = this;
                this.$confirm('此操作将永久删除该单词, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url: 'words',
                        type: 'DELETE',
                        data: {
                            id: id
                        },
                        success: function (res) {
                            that.getSourceManageInfo()
                            that.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                        }
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 切换词源
            switchSource() {
                let that = this;
                that.User.source = that.SourceManageInfo.now_source
                $.ajax({
                    url: 'users/nowsource',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(that.User),
                    dataType: 'json',
                    success:function (res) {
                        that.onload()
                    }
                })
            },
            // 获取用户基本信息
            getUserInfo() {
                const that = this
                $.ajax({
                    url: '/users/userInfo/' + that.User.id,
                    type: 'GET',
                    success: function (res) {
                        if (res.flag && res.msg == '获取成功') {
                            that.learnedWordsLength = res.data.num1
                            that.wordsLength = res.data.num2
                            that.Scale = Math.round(_this.learnedWordsLength * 100 / _this.wordsLength)
                        }
                    },
                    error: function (res) {
                        console.log('come in...')
                        // window.location.href = 'login.html'
                    }
                })
            },
            getPrompts() {
                let _this = this
                $.get("/words/prompts",
                    function (res) {
                        if (res.flag && res.msg == '获取成功') {
                            _this.prompts = res.data
                        }
                    }
                )
            },
            getPrompt(flag) {
                let temp = [];
                for (let i = 0; i < this.prompts.length; i++) {
                    if (this.prompts[i].type === flag) {
                        temp.push(this.prompts[i])
                    }
                }
                let index = Math.floor(Math.random() * temp.length)
                return temp[index].value
            },
            getWord() {
                _this = this,
                    $.get("/words/getWord/" + this.User.id,
                        function (res) {
                            if (res.flag && res.msg == 'get word ok!') {
                                _this.Word = res.data
                                if (_this.commonMode == true) {
                                    _this.OpenCommonMode()
                                }
                            } else {
                                alert("获取单词失败！")
                            }
                        }
                    )
            },
            // 普通模式
            openEasyMode() {
                this.easyMode = true
                this.commonMode = false
                this.difficultMode = false
            },
            // 一般模式
            OpenCommonMode() {
                this.easyMode = false
                this.commonMode = true
                this.difficultMode = false
                let _this = this
                let temp = ''
                let tempWord = ''
                let wordLen = _this.Word.value.length;
                _this.showWord = _this.Word.value
                //隐藏字母的数量
                let hiddenNum = Math.floor(Math.random() * wordLen / 3) + 1
                for (let i = 0; i < hiddenNum; i++) {
                    let hiddenIndex = Math.floor(Math.random() * wordLen)
                    temp = temp + hiddenIndex
                }
                for (let i = 0; i < wordLen; i++) {
                    if (temp.includes(i.toString())) {
                        tempWord = tempWord + '*'
                    } else {
                        tempWord = tempWord + _this.Word.value[i]
                    }
                }
                _this.showWord = tempWord
            },
            // 困难模式
            openDifficultMode() {
                this.easyMode = false
                this.commonMode = false
                this.difficultMode = true
            },
            submitWord() {
                _this = this
                //前端去匹配
                if (_this.Word.value == _this.sendWord.value.trim()) {
                    //匹配成功
                    _this.sendWord = _this.Word

                    $.ajax({
                        type: 'post',
                        url: '/words/sendWord/' + _this.User.id,
                        contentType: 'application/json',
                        data: JSON.stringify(_this.sendWord),
                        dataType: 'json',
                        success: function (res) {
                            if (res.flag && res.msg == '提交成功') {
                                //提交成功后执行的逻辑
                                _this.sendWord.value = ''
                                _this.$notify({
                                    title: '匹配正确',
                                    message: _this.getPrompt(1),
                                    offset: 400,
                                    type: 'success'
                                });
                                _this.getWord()
                                _this.getUserInfo()
                            }
                        }
                    })
                } else {
                    //匹配不成功
                    _this.$notify({
                        title: '匹配失败',
                        message: _this.getPrompt(0),
                        offset: 400,
                        type: 'error'
                    });
                }
            }
        }
    });
</script>
</html>